<template name="pyh-tab">
	<!-- 自定义底部导航栏组件 -->
	<view>
		<view class="tabHeight" v-if="tabBar.fixedAssist?!tabBar.fixedAssist.hide:true"></view>
		<view class="pyh-tab-box" ref="pyhTabBox"
			:style="[{'color':tabBar.color,'background-color':(tabBar.backgroundColor||'#ffffff')},{'border-top':tabBar.borderStyle?('1px solid '+tabBar.borderStyle):'none'}]">
			<image :src="tabBar.backgroundImage" mode="aspectFill" v-if="tabBar.backgroundImage" class="bgImage">
			</image>
			<view class="tabBox" v-if="tabBar.type=='slot'" @tap.stop="tabSlotTap">
				<slot></slot>
			</view>
			<view class="tabBox" v-else>
				<template v-for="(tab,t) in tabBar.list">
					<view :class="['tab',{'currentTab':tab.pagePath==currentPage}]" @tap.stop="tabTap(tab, t)"
						:style="{'color':tab.pagePath==currentPage?(tabBar.selectedColor||tabBar.color):tabBar.color}"
						:key="t" v-if="tab.show">
						<image class="tabIcon"
							:src="tab.pagePath==currentPage?(tab.selectedIconPath||tab.iconPath):tab.iconPath"
							v-if="tab.iconPath&&(!tab.type||tab.type=='image')"></image>
						<view class="tabIcon" v-if="tab.iconfont&&(tab.type&&tab.type=='iconfont')">

							<!-- <text class="tabIconFont">{{tab.iconfont}}</text> -->
							<uni-icons :class="tab.iconfont" :size="tabBar.size"
								:style="{'color':tab.pagePath==currentPage?(tabBar.selectedColor||tabBar.color):tabBar.color}"></uni-icons>
						</view>
						<text v-if="tab.text" :style="{fontSize:tabBar.fontSize}">{{tab.text}}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	let domModule = null;
	// #ifdef APP-NVUE
	domModule = weex.requireModule('dom')
	// #endif
	var platform = "h5";
	//#ifdef H5
	platform = "h5"
	//#endif
	//#ifdef APP-PLUS
	platform = "app"
	//#endif
	//#ifdef MP
	platform = "mp"
	//#endif
	export default {
		name: "pyh-tab",
		data() {
			return {
				tabBar: {
					show: true,
					type: "iconfont",
					position: "bottom",
					color: "#D3D1D1",
					selectedColor: uni.getStorageSync('bgColor') || '#509DF7',
					backgroundColor: "",
					backgroundImage: "",
					borderStyle: "#E6E6E6",
					size: 30,
					fontSize: "30rpx",
					list: [{
							"pagePath": "/pages/index/index", //页面路径，有没/开头都可以
							"text": "首页",
							"show": true,
							"iconfont": "iconfont icon-daibanshixiang", //字体图标路径，和iconPath互斥
							"IsShow": false,
							// "iconPath": "/static/tabBar/index.png",//图片路径，有没/开头都可以
							// "selectedIconPath": "/static/tabBar/index-ac.png",//图片路径，有没/开头都可以
						},
						{
							"pagePath": "/pages/formal/formal", //页面路径，有没/开头都可以
							"text": "客户",
							"show": true,
							"iconfont": "iconfont icon-kehu", //字体图标路径，和iconPath互斥
							"IsShow": false,
							// "iconPath": "/static/tabBar/category.png",//图片路径，有没/开头都可以
							// "selectedIconPath": "/static/tabBar/category-ac.png",//图片路径，有没/开头都可以
						},
						{
							"pagePath": "/pages/Transaction/List", //页面路径，有没/开头都可以
							"text": "订单",
							"show": true,
							"iconfont": "iconfont icon-woshou", //字体图标路径，和iconPath互斥
							"IsShow": false,
							// "iconPath": "/static/tabBar/cart.png",//含有"."则判断为图片路径，有没/开头都可以
							// "selectedIconPath": "/static/tabBar/cart-ac.png",//图片路径，有没/开头都可以
						},
						{
							"pagePath": "/pages/excel/excel", //页面路径，有没/开头都可以
							"text": "报表",
							"show": true,
							"iconfont": "iconfont icon--baobiaozhongxin", //字体图标路径，和iconPath互斥
							"IsShow": false,
							// "iconPath": "/static/tabBar/cart.png",//含有"."则判断为图片路径，有没/开头都可以
							// "selectedIconPath": "/static/tabBar/cart-ac.png",//图片路径，有没/开头都可以
						},
						{
							"pagePath": "/pages/User/User", //页面路径，有没/开头都可以
							"text": "...",
							"show": true,
							"iconfont": "iconfont icon-icon-test", //字体图标路径，和iconPath互斥
							"IsShow": false,
							// "iconPath": "/static/tabBar/user.png",//图片路径，有没/开头都可以
							// "selectedIconPath": "/static/tabBar/user-ac.png",//图片路径，有没/开头都可以
						}
					]
				},
				currentPage: "/" + (this.$parent.$page?.route || this.$parent.__page__?.route || this.$parent.$scope
					?.route || ""),
				deviceOrientation: "portrait",
				windowInfo: {
					width: uni.getSystemInfoSync().windowWidth,
					height: uni.getSystemInfoSync().windowHeight,
				},
				tabBoxRect: {
					wait: true,
					top: 0,
					width: uni.getSystemInfoSync().windowWidth
				},
				mainColor: "#509454",
			};
		},
		computed: {
			//安卓微信
			androidwx() {
				if (platform == "mp" && uni.getSystemInfoSync().platform.indexOf("ios") == -1) {
					return true;
				} else {
					return false;
				}
			},
		},
		created() {
			this.initTabBar();
			domModule && domModule.addRule('fontFace', {
				'fontFamily': 'tabIconFont',
				'src': "url('https://at.alicdn.com/t/font_2977155_1fvkums2uy9i.ttf?t=1638325591492.ttf')"
			})
		},
		onUnload() {
			uni.offWindowResize();
		},
		onShow() {
			console.log('显示了', )
		},
		methods: {
			initTabBar() {
				uni.hideTabBar();
				this.tabBar = Object.assign({
					show: true,
					type: "default",
					position: "bottom",
					color: "#666666",
					selectedColor: "red",
					backgroundColor: "",
					backgroundImage: "",
					borderStyle: "",
				}, this.tabBar)
				for (let t in this.tabBar.list) {
					if (!this.tabBar.list[t].pagePath.startsWith("/")) this.tabBar.list[t].pagePath = "/" + this.tabBar
						.list[t].pagePath
					this.tabBar.list[t] = Object.assign({
						show: true,
						type: (this.tabBar.list[t].iconfont ? 'iconfont' : 'image')
					}, this.tabBar.list[t])
					if (this.tabBar.list[t].type != 'iconfont') {
						if (!this.tabBar.list[t].iconPath.startsWith("/")) this.tabBar.list[t].iconPath = "/" + this.tabBar
							.list[t].iconPath
						if (this.tabBar.list[t].selectedIconPath && !this.tabBar.list[t].selectedIconPath.startsWith("/"))
							this.tabBar.list[t].selectedIconPath = "/" + this.tabBar.list[t].selectedIconPath
					}
				}
			},
			tabSlotTap(e) {
				//slot点击
				this.$emit("tabSlotTap");
			},
			tabTap(tab, index) {
				console.log('选中', tab, index, this.currentPage)
				this.$emit("tabTap", Object.assign(tab, {
					index
				}))
				if (tab.pagePath != this.currentPage) {
					this.linkTo({
						currentTarget: {
							dataset: {
								type: 'switchTab',
								url: tab.pagePath
							}
						}
					})
				}
			},
			linkTo(e) {
				//跳转
				var url = e.currentTarget.dataset.url,
					type = e.currentTarget.dataset.type;
				if (this.$nv) {
					this.$nv(url, type);
				} else {
					if (!url && !type) return;
					if (url == "/" || url == ".") return;
					if (typeof(url) == "object") {
						uni.navigateTo(url);
						return
					}
					if (typeof(url) == "number") {
						if (this.currentPages == 1) {
							uni.reLaunch({
								url: this.home
							})
						} else {
							uni.navigateBack({
								delta: Math.abs(url || 1)
							})
						}
						return;
					}
					if (type) {
						if (type.indexOf("ab") > -1) {
							uni.switchTab({
								url: url
							});
						} else if (type == '-1' || type.indexOf("redirect") > -1 || type.indexOf("rep") > -1) {
							uni.redirectTo({
								url: url
							});
						} else if (type.indexOf("aunch") > -1) {
							uni.reLaunch({
								url: url
							});
						} else if (type.indexOf("ack") > -1) {
							if (this.currentPages == 1) {
								uni.reLaunch({
									url: this.home
								});
							} else {
								uni.navigateBack();
							}
						} else {
							uni.navigateTo({
								url: url
							});
						}
					} else {
						if (url.indexOf("/") == 0 || url.indexOf(".") == 0) {
							uni.navigateTo({
								url: url
							});
						} else {
							if (url.indexOf("?") > 0) {
								url += "&platform=" + platform;
							} else {
								url += "?platform=" + platform;
							};
							if (platform == "h5") {
								top.location.href = url;
							} else if (platform == "app") {
								plus.runtime.openUrl(url);
							} else {
								uni.navigateTo({
									url: "/pages/other/webview/webview?src=" + url.replace("?", "&")
								});
							}
						}
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	@font-face {
		font-family: tabIconFont;
		src: url('https://at.alicdn.com/t/font_2977155_1fvkums2uy9i.ttf?t=1638325591492.ttf') format('truetype');
	}

	/* #endif */

	.tabIconFont {
		font-family: tabIconFont;
		font-size: 50rpx;
		font-style: normal;
	}

	//主色，可以设置uni.scss的$mainColor
	//或
	//uni.scss未定义或定义为null,修改下方$mainColor的默认值
	$mainColor: #FF3636 !default;

	.tabHeight {
		height: 50px;
		width: 100%;
	}

	.pyh-tab-box {
		font-size: 12px;
		z-index: 90;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 50px;
		line-height: initial;
		background-color: #ffffff;
		padding-top: 10rpx;
	}

	.bgImage {
		width: 100%;
		height: 100%;
	}

	.tabBox {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.currentTab {
		color: $mainColor;
	}

	.tabIcon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 6rpx;
	}
</style>